@import 'mixin.scss';
@import 'table.scss';

@include card-title;
@include video-box;

.page-overview{
	.left-box{
		width: calc(36% - 10px);
		margin-right: 10px;
		height: 100%;
		background: url("../img/overview.png") left top no-repeat;
		background-size: 100% 100%;
		
		.top-part{
			width: 100%;
			height: 40%;
		
			.title-txt{
				margin-right: 35px;
			    height: 22px;
			    font-size: 16px;
			    font-weight: 200;
			    color: #fff;
			    line-height: 22px;
			    padding-left: 20px;
			    background: url(../img/GPS.png) 0px center no-repeat;
			 }
			
			.second{
				.se-left{
					width: 102px;
					height: 92px;
					font-size: 66px;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 92px;
					margin-left: -10px;
				}
			}

			.fixed-width{
				min-width: 240px;
			}

			.bg-yellow{
				background: #FDBC40;
				padding:2px 4px;
				border-radius:4px;
				margin-left: 10px;
			}
		}
		.bottom-part{
			width: 100%;
			height: 60%;
			position: relative;
			.buttom-title{
				height: 20px;
				font-size: 14px;
				color: #FFFFFF;
				padding-left: 16px;
			}
			.api{
				width: 100%;
				height: calc(100% - 20px);
			}
			#select2{
				height: 30px;
				display: block;
				width: 200px;
				position:absolute;
				right: 40px;
				top:10px;
				z-index: 99;
			}
		}
	}

	.center-box{
		width: calc(30% - 5px);
		height: 100%;

		.card{
			height: calc(50% - 5px);
			background: url("../img/overview-center.png") left top no-repeat;
			background-size: 100% 100%;
		}
		
	}

	.right-box{
		width: calc(34% - 5px);
		height: 100%;
		margin-left: 10px;

		.card{
			height: calc(50% - 5px);
			background: url("../img/overview-right.png") left top no-repeat;
			background-size: 100% 100%;
		}
	}

	.content-body{
		padding:4px;
		.top-box{
			width: 100%;
			height: 50%;

		}
		.bottom-box{
			width: 100%;
			height: 50%;

			.title{
				height: 30px;
				line-height: 30px;
				padding: 0 10px;
			}

			.card{
				width: 100%;
				height: calc(100% - 30px);
				display: flex;
				flex-wrap:wrap;
				padding:0 10px 10px;
			}

			.video-item{
				width: calc(50% - 5px);
				height: calc(50% - 5px);
				margin-top: 10px;
			}

			.video-item:nth-child(1),
			.video-item:nth-child(2){
				margin-top: 0;
			}

			.video-item:nth-child(2n+2){
				margin-left: 10px;
			}
		}

		.circle-chart{
			width: 50%;
			height: 100%;
		}

		.hrate-45{
			height: 45%;
		}

		.hrate-55{
			height: 55%;
		}
	}
	
}